<template>
	<view class="content" style="background-color: #fff;">

		<image style="width:100%;position: absolute;bottom:0;left:0;width:100%;" mode="widthFix"
			src="../../static/1.svg"></image>

		<view class="loginBox">
			<h3 style="text-align: center;margin-bottom:120rpx;">设备设施管理系统</h3>
			<view class="inputBox">
				<view class="ipt">
					<uni-icons type="contact" size="24" color="rgb(66,157,250)"></uni-icons>
					<input type="text" v-model="loginForm.username" placeholder="请输入账号" />
				</view>
				<view class="ipt">
					<uni-icons type="eye" size="24" color="rgb(66,157,250)"></uni-icons>
					<input password type="text" v-model="loginForm.password" placeholder="请输入密码" />
				</view>
				<!-- <view class="ipt">
					<uni-icons type="checkmarkempty" size="24" color="rgb(66,157,250)"></uni-icons>
					<input type="text" v-model="loginForm.code" placeholder="请输入验证码" />
					<image :src="codeUrl" class="yzm" @click="getcode"></image>
				</view> -->
				<button @click="login">登录</button>
				<view class="forgetPwd">
					<!-- <span>登录后将绑定用户，无法切换</span> -->
				</view>
			</view>
			<!-- <view class="tipbox">
				<view class="txt">
					—— 其他账号登录 ——
				</view>
				<view class="otherUser">
					<uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons>
					<uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import { encrypt, decrypt } from "@/util/encrypt";
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				code: "", //微信code
				openId: "",
				captchaEnabled: true,
				codeUrl: "",
				loginForm: {
					tenantId: '000000',
					username: '',
					password: '',
					rememberMe: false,
					code: '',
					uuid: '',
					clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
					grantType: 'password'
				}
			}
		},
		mounted() {
			// this.getOpenId('091CIyFa1wHx9I0bCcJa19hL0W0CIyFS')
			// this.getcode();
		},
		methods: {
			login() {
				console.log(this.loginForm)
				let loginForm = Object.assign({}, this.loginForm)
				loginForm.password = encrypt(loginForm.password);
				this.$request('', '/auth/login', 'POST', loginForm, {}, ).then(res => {
					uni.setStorageSync("token", 'Bearer ' + res.data.access_token)
					this.getInfo()
				})
			},
			getInfo() {
				this.$request('', '/system/user/getInfo', 'get', {}, {}, ).then(res => {
					uni.setStorageSync("userInfo", res.user)
					uni.switchTab({
						url:'/pages/home/index'
					})
				})
			},
			getcode() {
				this.$request('', '/auth/code', 'get', {}, {
					isToken: false
				}).then(res => {
					this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res.data.img;
						this.loginForm.uuid = res.data.uuid
					}
				})
			},
			getOpenId(val) {
				this.$request('', '/iot/vx/token', 'get', {
					state: "",
					code: val
				}, {}).then(res => {
					this.openId = res.data
					console.log(this.openId)
				})
			}
		}
	}
</script>

<style scoped>
	svg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40%;
		box-sizing: border-box;
		display: block;
		background-color: #ffffff;
	}

	.loginBox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);
		width: 90%;
		border-radius: 20rpx;
		padding: 60rpx;
		box-sizing: border-box;
	}

	h3 {
		color: rgb(66, 157, 250);
		font-size: 40rpx;
		letter-spacing: 10rpx;
		margin-bottom: 40rpx;
	}

	.inputBox {}

	.ipt {
		height: 86rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 40rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding-left: 10rpx;
	}

	.ipt input {
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.ipt input {
		margin-left: 20rpx;
	}

	.forgetPwd {
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #b5b5b5;
		text-align: end;
		padding: 0 10rpx;
		display: flex;
		justify-content: space-between;
	}

	button {
		margin-top: 20rpx;
		line-height: 85rpx;
		text-align: center;
		background: rgb(66, 157, 250);
		border-radius: 40rpx;
		color: #fff;
		margin-top: 40rpx;
	}

	.tip {
		text-align: center;
		font-size: 28rpx;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #f4f4f4;
	}

	.tipbox {
		text-align: center;
		margin-top: 100rpx;
	}

	.otherUser {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}

	.txt {
		font-size: 28rpx;
		color: #cbcbcb;
	}

	.otherUser .uni-icons {
		margin-left: 20rpx;
	}

	.yzm {
		text-align: end;
		font-size: 24rpx;
		background: linear-gradient(to right, rgb(66, 157, 250), rgb(0, 170, 127));
		height: 60rpx;
		width: 150rpx;
		line-height: 60rpx;
		text-align: center;
		/* border-radius: 10rpx; */
		color: #fff;
	}
</style>